<template>
    <div class="Menu-container">
        <div class="tabs">
            <input type="radio" name="tabsMenu" id="analysis" checked> 
            <input type="radio" name="tabsMenu" id="data"> 
            <input type="radio" name="tabsMenu" id="ranking"> 
            <input type="radio" name="tabsMenu" id="problem"> 
            <input type="radio" name="tabsMenu" id="accelerate">
            <div class="buttons">
                <label for="analysis">
                   <SvgIconG name="analysis" class="icon"></SvgIconG>
                </label>
                <label for="data">
                    <SvgIconG name="data" class="icon"></SvgIconG>
                </label>
                <label for="ranking">
                    <SvgIconG name="ranking" class="icon"></SvgIconG>
                </label>
                <label for="problem">
                    <SvgIconG name="problem" class="icon"></SvgIconG>
                </label>
                <label for="accelerate">
                    <SvgIconG name="accelerate" class="icon"></SvgIconG>
                </label>
                <div class="underline"></div>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
defineOptions({
    name:'sr-menuh'
})
</script>

<style scoped lang="scss">
.Menu-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; 
    .tabs {
        input {
            visibility: hidden; 
            display: none;
        }
        input:nth-child(1):checked~.buttons label:nth-child(1),
        input:nth-child(2):checked~.buttons label:nth-child(2),
        input:nth-child(3):checked~.buttons label:nth-child(3),
        input:nth-child(4):checked~.buttons label:nth-child(4),
        input:nth-child(5):checked~.buttons label:nth-child(5) {
            opacity: 1;
            color: #fff;
            filter: drop-shadow(0 0 15px #fff) drop-shadow(0 0 30px #fff);
        }
        .buttons {
            display: flex;
            align-items: center;
            width: 30rem;
            height: 0.4rem;
            gap: 4rem; //间距
            padding: 3rem 2rem;
            background: #4c6880;
            overflow: hidden;
            border-radius: 1.6rem;
            position: relative;
            label {
                width: 20%;
                -webkit-text-stroke: 3rem #fff;
                color: transparent;
                opacity: 0.5;
                cursor: pointer;
                transition: 0.5s;
                .icon {
                    width: 100% !important;
                    height: 100% !important
                }
            }
            label:hover {
                opacity: 1;
                filter: drop-shadow(0 0 1rem #fff) drop-shadow(0 0 1rem #fff);
            }
            .underline {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 20%;
                height: 5px;
                transition: 0.5s;
            }
            .underline::before {
                content: '';
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                width: 40px;
                height: 100%;
                background-color: #fff;
                border-radius: 4px;
                filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #fff) drop-shadow(0 0 30px #fff) drop-shadow(0 0 50px #fff);
            }
            .underline::after {
                content: '';
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                width: 40px;
                height: 100%;
                background-color: #fff;
                border-radius: 4px;
                filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #fff) drop-shadow(0 0 30px #fff) drop-shadow(0 0 50px #fff) blur(5px);
            }
        }
    }
    .tabs input:nth-child(1):checked~.buttons .underline {
        left: 0;
    }
    .tabs input:nth-child(2):checked~.buttons .underline {
        left: 20%;
    }
    .tabs input:nth-child(3):checked~.buttons .underline {
        left: 40%;
    }
    .tabs input:nth-child(4):checked~.buttons .underline {
        left: 60%;
    }
    .tabs input:nth-child(5):checked~.buttons .underline {
        left: 80%;
    }
}
</style>